<template>
    <el-form ref="registerForm" :model="registerUser" :rules="registerRules" label-width="100px"
             class="registerForm sign-up-form">
        <p class="sign-up-title">用户注册</p>
        <div class="sign-up-content">
            <el-form-item label="姓名" prop="nickName">
                <el-input v-model="registerUser.nickName" placeholder="输入用户姓名"/>
            </el-form-item>
            <el-form-item label="账号" prop="userName">
                <el-input v-model="registerUser.userName" placeholder="输入登录账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="registerUser.password" type="password" show-password placeholder="输入登录密码"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
                <el-input v-model="registerUser.password2" type="password" show-password placeholder="再次输入密码"/>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="registerUser.phone" placeholder="请输入手机号码"/>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="registerUser.sex">
                    <el-radio v-for="dict in sexDictData" :key="dict.dictValue" :value="dict.dictValue">{{dict.dictLabel}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择角色" prop="role">
                <el-select v-model="registerUser.role" placeholder="请选择角色">
                    <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.roleKey"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button class="submit-btn" type="primary" @click="submitRegister">注 册</el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {registerUser, registerRules} from "@/common/valid/register.ts";
import {register, registerRoleList, dictDataByDictType} from "@/api/login";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance();//相当于vue2的this指向

const router = useRouter();

//性别字典数据
const sexDictData = ref([])
//角色集合
const roleOptions = ref([])

getSexDictData();
getRegisterRoleList();

//查询性别字典数据列表
function getSexDictData() {
    dictDataByDictType('sys_user_sex').then(response => {
        sexDictData.value = response.data;
    })
}

//查询注册角色列表
function getRegisterRoleList() {
    registerRoleList().then(response => {
        roleOptions.value = response.data;
    })
}

// 提交注册
function submitRegister() {
    proxy.$refs['registerForm'].validate((valid) => {
        if (valid) {
            let registerForm = registerUser.value;
            register(registerForm).then(response => {
                proxy.$message.success("注册成功！跳转登录...");
                router.go(0);//刷新页面
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>

<style scoped>
.registerForm {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
}

.sign-up-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 20px 20px 50px 20px;
}

.sign-up-content {
    padding-right: 40px;
}

.submit-btn {
    width: 88%;
    margin-top: 20px;
    padding: 18px;
}
</style>